<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>导航</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/public.css" />
    <script type="text/javascript" src="../script/lib-flexible.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #ededed;
        }
        /*头部*/

        header {
            height: 1.33rem;
            line-height: 1.33rem;
            background-color: #00acff;
        }

        .title {
            text-align: center;
            font-size: .5rem;
            color: #ffffff;
        }

        .right {
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: 1.33rem;
            height: 1.33rem;
            background: url(../image/icon/icon_add.png);
            background-position: center center;
            background-size: .88rem .88rem;
            background-repeat: no-repeat;
        }

        .header {
            display: none;
        }

        .header.on {
            display: block;
        }
        /*底部*/
        /*底部切换栏*/

        footer {
            background-color: #2d2f31;
            color: #eee;
            height: 1.33rem;
        }

        .bar-tab-item {
            position: relative;
            text-align: center;
        }

        .bar-tab-item .icon {
            position: absolute;
            left: 0;
            width: 100%;
            height: .88rem;
        }

        .bar-tab-item .message {
            background: url(../image/footer/icon_message.png);
            background-position: center center;
            background-size: .88rem .88rem;
            background-repeat: no-repeat;
        }

        .active .message {
            background: url(../image/footer/icon_message_on.png);
            background-position: center center;
            background-size: .88rem .88rem;
            background-repeat: no-repeat;
        }

        .bar-tab-item .directories {
            background: url(../image/footer/icon_maillist.png);
            background-position: center center;
            background-size: .88rem .88rem;
            background-repeat: no-repeat;
        }

        .active .directories {
            background: url(../image/footer/icon_maillist_on.png);
            background-position: center center;
            background-size: .88rem .88rem;
            background-repeat: no-repeat;
        }

        .bar-tab-item .setup {
            background: url(../image/footer/icon_setting.png);
            background-position: center center;
            background-size: .88rem .88rem;
            background-repeat: no-repeat;
        }

        .active .setup {
            background: url(../image/footer/icon_setting_on.png);
            background-position: center center;
            background-size: .88rem .88rem;
            background-repeat: no-repeat;
        }

        .active {
            color: #00acff;
        }

        .bar-tab-item .bar-tab-label {
            display: block;
            font-size: .24rem;
            position: relative;
            margin-top: .9rem;
        }

        .badge {
            position: absolute;
            top: .03rem;
            left: 60%;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            min-width: .4rem;
            height: .4rem;
            line-height: .4rem;
            font-size: .22rem;
            /*padding: 2px;*/
            text-align: center;
            color: #fff;
            border-radius: 50%;
            background-color: #ff2600;
        }

        .dot {
            position: absolute;
            top: .07rem;
            left: 60%;
            vertical-align: middle;
            width: .18rem;
            height: .18rem;
            border-radius: .18rem;
            background-color: #ff2600;
        }
    </style>
</head>

<body>
    <div class="flex-vertical" id="rootWarp" v-cloak>
        <!--  头部 -->
        <header id="header">
            <div class="header" :class="{on:headers.num==0}" v-for="(headers,index) in header">
                <div class="title">{{headers.name}}</div>
                <div class="right" @click="fnAddFriends();" v-if="headers.id==1"></div>
            </div>
        </header>
        <!--  sectionflex-con -->
        <section class="flex-con"></section>
        <!--  底部 -->
        <footer id="footer" class="flex-wrap">
            <div class="bar-tab-item flex-con" :class="{active:footers.num==0}" v-for="(footers,index) in footer" @click="fnChange(index);">
                <!-- 聊天列表消息数 -->
                <div class="badge" v-show="footers.name=='消息' && footers.number>0">{{footers.number}}</div>
                <!-- 通讯录加好友的新消息提示 -->
                <div class="dot" v-if="footers.id==1 && footers.newNews==true"></div>
                <i class="icon" :class="fnAddcs(footers.id)"></i>
                <div class="bar-tab-label">{{footers.name}}</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../script/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../script/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../script/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript">
    apiready = function() {
        //初始化vue
        fnInitVue();
    };
    //  设置底部点击初始化0防止多次重复点击
    var eliminate = 0;

    function fnInitVue() {
        window.rootVue = new Vue({
            el: '#rootWarp',
            data: {
                header: [],
                footer: []
            },
            mounted: function() {
                this.$nextTick(function() {
                    fnRequest();
                    fnInit();
                    // 调取环信接口监听新消息
                    fnAddMessageListener();
                });
            },
            methods: {
                //打开添加好友页面
                fnAddFriends: function() {
                    fnAddContact('marong','hello');
                },
                // 底部图标状态
                fnAddcs: function(id) {
                    if (id == 0) {
                        return "message"; //消息图标
                    }
                    if (id == 1) {
                        return "directories"; //通讯录图标
                    }
                    if (id == 2) {
                        return "setup"; //设置图标
                    }
                },
                //底部tab
                fnChange: function(index) {
                    // 防止重复点击
                    if (index == eliminate) {
                        return;
                    }
                    eliminate = index;
                    // // 改变头部显示
                    // this.header[index].num = 0;
                    // // 改变底部显示
                    // this.footer[index].num = 0;
                    fnActiveIndex(index)
                        //改变页面

                }
            }
        })
    }

    // 头部、底部json
    function fnRequest() {
        window.rootVue.header = [{
            "id": 0,
            "name": "消息",
            "num": 0
        }, {
            "id": 1,
            "name": "通讯录",
            "num": 1
        }, {
            "id": 2,
            "name": "设置",
            "num": 1
        }]

        window.rootVue.footer = [{
            "id": 0,
            "name": "消息",
            "number": 0,
            "num": 0,
            "url": "message"
        }, {
            "id": 1,
            "name": "通讯录",
            "newNews": true,
            "num": 1,
            "url": "maillist"
        }, {
            "id": 2,
            "name": "设置",
            "num": 1,
            "url": "setup"
        }]
    }

    var eHeader, eFooter, headerH, footerH;

    function fnInit() {
        //双击退出
        keyListen();
        eHeader = $api.byId('header');
        eFooter = $api.byId('footer');
        // 设置头部底部fixStatusBar fixTabBar 状态栏跟ios底部栏的自适应高度
        $api.fixStatusBar(eHeader);
        $api.fixTabBar(eFooter);
        // 获取头部底部高度
        headerH = $api.offset(eHeader).h;
        footerH = $api.offset(eFooter).h;
        // 初始化group
        fninitFrameGroup();

    }

    function fninitFrameGroup() {

        var frames = [];
        for (var i = 0; i < window.rootVue.footer.length; i++) {
            frames.push({
                name: window.rootVue.footer[i].url,
                url: './' + window.rootVue.footer[i].url + '_frm.html',
                bounces: false,
                reload: true,
                vScrollBarEnabled: false,
                hScrollBarEnabled: false,
                bgColor: '#ededed'
            });
        };
        api.openFrameGroup({
            name: 'main_group',
            rect: {
              marginLeft: 0,
              marginTop: headerH,
              marginBottom: footerH,
              marginRight: 0,
                // x: 0,
                // y: headerH,
                // w: 'auto',
                // h: api.winHeight - headerH - footerH
            },
            scrollEnabled: false,
            preload: 0,
            index: 0,
            frames: frames
        }, function(ret, err) {
            // console.log(JSON.stringify((ret)))
            fnActiveIndex(ret.index)
        });
    }
    //  设置底部跟头部选中状态num
    function fnActiveIndex(index) {
      api.setFrameGroupIndex({
          name: 'main_group',
          index: index
      });
        // 头部
        for (var i = 0; i < window.rootVue.header.length; i++) {
            if (i == index) {
                window.rootVue.header[i].num = 0;
            } else {
                window.rootVue.header[i].num = 1;
            }
        }
        // 底部
        for (var i = 0; i < window.rootVue.footer.length; i++) {
            if (i == index) {
                window.rootVue.footer[i].num = 0;
            } else {
                window.rootVue.footer[i].num = 1;
            }
        }
    }

    // 设置最新消息数
    function fnNewsBadge(_number) {
        if (_number >= 0) {
            $api.setStorage('unread_total', _number);
        }
        if (_number < 99) {
            window.rootVue.footer[0].number = _number;
        } else {
            window.rootVue.footer[0].number = '99+';
        }
    }
</script>

</html>
